<template>
  <div id="YourElementId"></div>
  <el-button @click="deeDel">删除</el-button>
  <el-button @click="setLabels">图片2</el-button>
  <el-button @click="preBtn">图片1</el-button>
  <el-button @click="setLabelActive">根据uuid设置标注的激活状态</el-button>
  <el-button @click="getCoordinate">获取标注</el-button>
  <el-button @click="setnamebtn">名称</el-button>
  <el-button @click="setcolorbtn">颜色</el-button>
  <el-button @click="readOnlyBtn">编辑</el-button>
  <div class="coord">
    <div id="default-coord">默认坐标：{{  JSON.stringify(currentLabelCoord) }}</div>
    <div id="yolo-coord">YOLO坐标:{{  JSON.stringify(currentYoloCoord) }}</div>
  </div>
</template>
<!-- https://github.com/king2088/simple-image-label/blob/main/readme-zh.md 地址 -->
<script setup>
import SimpleImageLabel from 'simple-image-label'
import { ref, onMounted } from 'vue';
const currentLabelCoord = ref('')
const currentYoloCoord = ref('')
const simpleImageLabel = ref(null);
const {imageUrl,labels,labelItem,simpleImageLabel1} = defineProps({  
    imageUrl: {  
      default: false  
    },  
    simpleImageLabel1: {  
      default: false  
    },  
    labels: {  
      type: Array,  
      default: false  
    } ,
    labelItem:{
      type: Object,  
      default: false  
    }
  });
  const nextLabels = [{
  x: 0.46949199999999996,
  y: 0.128668,
  width: 0.191526,
  height: 0.202032,
  name: 'Grass Mud Horse',
  color: 'blue'
}, {
  x: 0.7186440000000001,
  y: 0.241535,
  width: 0.15762700000000002,
  height: 0.177201,
  name: 'Grass Mud Horse',
  color: 'blue',
}, {
  x: 0.7406780000000001,
  y: 0.536117,
  width: 0.130508,
  height: 0.173815,
  name: 'Duck',
  color: 'red'
}, {
  x: 0.874576,
  y: 0.481941,
  width: 0.115254,
  height: 0.148984,
  name: 'Duck',
  color: 'red'
}, {
  x: 0.0338983,
  y: 0.574492,
  width: 0.111864,
  height: 0.13544,
  name: 'Duck',
  color: 'red'
}]
//   const nextLabels = [{
//     uuid: '', // 随机生成
//     x: 0, // 百分比 = 左上角x轴坐标 / 当前图片宽度
//     y: 0, // 百分比 = 左上角y轴坐标 / 当前图片高度
//     width: 0, // 矩形宽度百分比 = 矩形宽度 / 当前图片宽度
//     height: 0, // 矩形高度百分比 = 矩形高度 / 当前图片高度
//     name: '', // 矩形名称
//     color: '' // 矩形颜色
// }]
  // 使用 defineEmits 定义事件  
  const emit = defineEmits(['contextmenu', 'labelClick', 'submit']);  
  const currentLabel = ref({})
onMounted(() => {
  simpleImageLabel.value = new SimpleImageLabel({
      el: 'YourElementId',
      imageUrl: imageUrl,
      labels: labels,
      contextmenu: (e) => {
        // 鼠标右键点击事件
          emit('contextmenu', e)
      },
      labelClick: (label) => {
        // 鼠标左键点击事件
        currentLabel.value = label
        const coord = simpleImageLabel.value.getLabelsCoordinate()
        currentLabelCoord.value = simpleImageLabel.value.getCoordinate(label)
        currentYoloCoord.value = simpleImageLabel.value.convertToYoloCoordinate(label)
        emit('labelClick', coord,label) 
      },
      error: (e) => {
        // 错误事件
          emit('error', e)
      },
      getLabels:(e)=>{
        console.log('e',e);
        
      },

  });
})
// 移除所有标注
const deeDel = () => {
  simpleImageLabel.value.removeAllLabels()
        // console.log('labels', labels);
}
// 切换图片2
const setLabels = () =>{
  setImageAndLabels(simpleImageLabel1, nextLabels)
}
// 切换图片1 
const preBtn = () => {
  setImageAndLabels(imageUrl, labels)
}
function setImageAndLabels(image, labels) {
  // 重设图片
  simpleImageLabel.value.setImage(image, (err) => {
    console.error(err)
  })
  // 设置标注
  simpleImageLabel.value.setLabels(labels)
}
// 编辑
const readOnlyBtn = () => {
  const readOnly = !simpleImageLabel.value.readOnly;
  simpleImageLabel.value.setReadOnly(readOnly)
}


// 获取标注坐标
const getCoordinate = () => {
  const labels =  simpleImageLabel.value.getCoordinate
  console.log('labels',labels);
  
}

// 根据uuid设置标注的激活状态
const setLabelActive = () => {
 const res = simpleImageLabel.value.setLabelActive(labelItem.uuid)
 console.log('res',res);
}

// 设置姓名
const setnamebtn = () =>{
  const name = window.prompt('设置当前label名称')
  if (name) {
    simpleImageLabel.value.setLabelByUuid(currentLabel.value.uuid, {
      name
    })
  }
}
// 设置颜色 、
const setcolorbtn = () => {
  const color = window.prompt('设置当前修改颜色')
  if (color) {
    simpleImageLabel.value.setLabelByUuid(currentLabel.value.uuid, {
      color
    })
  }
}
</script>
<style scoped>
.coord{
  font-size: 12px;
      text-align: center;
      line-height: 1.5;
      margin-top: 10px;
}
#default-coord {
      color: #929292;  
    }
    #yolo-coord{
      color: rgb(18, 182, 127);
    }
</style>
